<template>
  <div class="detail">
    <swiper
      indicator-dots
      indicator-color="rgba(225, 225, 225, .5)"
      indicator-active-color="#fff"
      autoplay
      circular
      class="index-slide"
    >
      <block v-for="(item,index) in detail.pics" :key="index">
        <swiper-item>
          <image 
            :src="item.pics_mid" 
            class="slide-image" 
            model="aspectFill" 
            @tap="previewbigImg(item.pics_mid)"></image>
        </swiper-item>
      </block>
    </swiper>
    <view class="pro-info">
      <view class="pro-price">￥{{detail.goods_price}}</view>
      <view class="text-start">
        <view class="pro-text">{{detail.goods_name}}</view>
        <view class="collect">
          <text class='iconfont icon-shoucang'></text>
          <view>收藏</view>
        </view>
      </view>
    </view>
    <view class="detail-content">
      <view class="detail-tytle">商品详情</view>
      <view class="pro-content">
        <rich-text type="node" :nodes="detail.goods_introduce"></rich-text>
      </view>
    </view>
    <view class="footer">
      <button class="contact" open-type="contact">打开客服聊天窗口</button>
      <view class="ft-left">
        <span class="iconfont icon-kefu"></span>
        客服
      </view>
      <navigator 
        open-type="switchTab" 
        url="/pages/cart/main" 
        class="ft-left">
        <span class="iconfont icon-gouwuche"></span>
        购物车
      </navigator>
      <view class="ft-right" @tap="addToCart(detail.goods_id)">
        加入购物车
      </view>
      <view class="ft-right">
        立即购买
      </view>
    </view>
  </div>
</template>
<script>
import request from "@/utils/request.js";
export default {
  data() {
    return {
      goodsId: "",
      detail:{},
    };
  },
  onLoad(query) {
    this.goodsId = query.id;
    request.get("goods/detail", { goods_id: this.goodsId }).then(res => {
      this.detail = res.data.message
      this.detail.goods_introduce = this.detail.goods_introduce.replace(/jpg?.+?.webp/g,'jpg');
    });
  },
  methods:{
    previewbigImg(url){
      let imgUrls = [];
      this.detail.pics.forEach(v=>{
        imgUrls.push(v.pics_big);
      });
      wx.previewImage({
        current: url,
        urls:imgUrls
      })
    },
    addToCart(id){
      if(!id){
        return 
      }else{
        let cartList = wx.getStorageSync('cartListData') || {};
        if(!cartList[id]){
          let{goods_name,goods_small_logo,goods_price} = this.detail
          cartList[id] = {
            selected:true,
            count:1,
            goods_name:goods_name,
            goods_small_logo:goods_small_logo,
            goods_price:goods_price
          }
        }else{
          cartList[id].count += 1
        }
        wx.setStorageSync('cartListData',cartList )
          wx.showToast({
            title: '加入成功', //提示的内容,
            icon: 'success',  //图标,
            duration: 1000,   //延迟时间,
            mask: true,       //显示透明蒙层，防止触摸穿透,
          });
      }
    }
  }
  
};
</script>
<style lang="scss" scoped>

.index-slide{
  height: 620rpx;
  margin: 0 auto;
  .slide-image {
  height: 100%;
  width: 100%;
  }
}

.pro-info{
  padding-left: 16rpx;
  .pro-price{
  color:red;
  padding: 40rpx 0;
  font-size: 38rpx
  } 
  .text-start{
    display: flex;
    .pro-text{
      font-size: 30rpx;
      padding-right: 76rpx;
      width: 514rpx;
      overflow:hidden;
      display:-webkit-box; 
      text-overflow:ellipsis;
      -webkit-line-clamp:2; 
      -webkit-box-orient:vertical;  
      white-space:normal; 
      border-right: 1px solid #ccc
    }
    .collect{
      flex: 1;
      text-align: center;
      font-size: 30rpx;
    }
  }
}
.footer{
    position: fixed;
    width:100%;
    left:0;
    bottom:0;
    height:100rpx;
    background:#fff;
    display: flex;

    .contact{
        width:20%;
        height:100rpx;
        padding:0;
        margin:0;
        position: absolute;
        left:0;
        top:0;
        opacity: 0;
    }

    .ft-left{
        width:20%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color:#666;
        font-size: 14px;

        span{
            font-size:18px;
        }
    }

    .ft-right{
        width:30%;
        background: orange;
        line-height: 100rpx;
        text-align: center;
        color:#fff;

        &:last-child{
            background: red;
        }
    }

}
.pro-content{
  font-size: 0;
}

</style>
